嗨，大家好
昨天我們先認識了HTML，知道他是標記語言，再認識了標籤。
今天我們要開始認識各種標籤，在開始之前，讓我們再次複習一下昨天學到有關標籤的基本規則吧：
1.標籤的形式 <title> </title>
2.標籤用 < > 這種括弧
3.括弧中要用英文寫元素(標籤)的名稱
4.標籤會有起始標籤跟結束標籤，結束標籤會多一個「/」
5.起始標籤跟結束標籤中間夾的是內容
複習完就打開VS Code來認識標籤吧。
1.先在桌面建立一個資料夾(名稱自己取)
2.打開VS Code 點紅色關閉預設頁面，再點黃色打開側邊攔
Open Folder
點一下剛剛在桌面建立的資料夾(不要點進去資料夾裡面)，然後點「選擇資料夾」
畫面就會多了剛剛開啟的資料夾(像我就叫做鐵人賽)。
在下方空白處(黃色框處)點右鍵，選擇New File(建立新檔案)。
檔案名稱就取 day04-認識標籤.html (因為我們是建立html檔，所以副檔名一定要.html)
點一下建立好檔案，可以看到右邊(黃框)就會出現編輯欄了
接下來我們就要在裡面開始編寫內容了
請先打英文的驚嘆號，接著按tab鍵 (! + Tab)
看一下出現的畫面，找找看哪些是一對的開始跟結束標籤吧
找到了嗎？
1.紅色 <html> </html>
2.藍色 <head> </head>
3.黃色 <body> </body>
4.橘色 <title> </title>
有一些沒有結束標籤，為什麼會跟我們學到的不太一樣呢？
讓我們先大致了解一下這段程式碼的意思吧。
<!DOCTYPE html> 第一行是在告訴瀏覽器現在這個檔案是HTML5檔。(HTML5是HTML最新的修訂版本)<html lang="en"> </html> 這是html標籤，html檔案的內容會全部夾在紅色的html標籤裡面。 lang="en"表示我們把語言設為英語。
HTML標籤裡面，包含了兩大區塊
1.<head> </head>：簡單來說，這一塊可以想像成放一些設定的內容。
a.<meta charset="UTF-8">：設定檔案使用UTF-8的編碼。
b.<meta name="viewport" content="width=device-width, initial-scale=1.0">：設定頁面的寬度要等於設備的寬度，初始縮放的比例是1。
有沒有覺得裡面的內容很複雜，不好理解呢？
所以說這塊的內容是給瀏覽器看，不是給看網頁的人看的。這邊的東西不會出現在網頁上。
c.<title>Document</title>是什麼呢？
來修改一下裡面的文字看看吧。
修改完後請存檔 (CTRL + S) ，然後打開我們前天下載的live server (點右下角的 Go Live)
我們的網頁就跳出來拉，有找到剛剛修改的內容嗎？
2.<body> </body>：我們網頁看到的內容，就是在這裡做編寫。
以上是HTML5結構的說明，講了這麼多其實重點就是一句話， 我們接下來要學到的標籤都會是寫在 <body> </body> 裡面。 大家可以嘗試在裡面輸入一些內容，再用 live server 看看有沒有出現吧。
iThome鐵人賽
看影片追技術